<template>
  <div class="gpt3">
      <div class="question">
          <div style="height: 15%; display: flex; justify-content: center; align-items: center;">
              <div class="selection-btn">
                  <button :class="{ active: selectedOption === 'gpt3.5' }" @click="selectOption('gpt3.5')">大模型3.5</button>
                  <button :class="{ active: selectedOption === 'gpt4' }" @click="selectOption('gpt4')">大模型4</button>
              </div>
          </div>
          <div style="height: 70%; display: flex; justify-content: center; align-items: center;">
              
          </div>
          <div style="height: 15%; display: flex; justify-content: center; align-items: center;">
              <div class="chat-input-wrapper">
                  <textarea v-model="question" placeholder="请输入您的问题" class="chat-input" @keydown.enter.prevent="handleEnterKey" @keydown.shift.enter="handleShiftEnterKey"></textarea>
                  <button @click="submitQuestion" class="submit-button">提交</button>
              </div>
          </div>
      </div>
      <div class="selection">
          <div style="height: 30%;">
          </div>
          <div style="height: 70%;">
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'gpt4',
  data() {
      return {
          selectedOption: 'gpt4', // 默认选中 '大模型3.5'
          question: '' ,// 用于存储用户输入的问题
          collects:[],
          collect:"test",
          askContent:"",
          articleId:'',
          msgList:[
              {type:"ask",content:"C呼文章 · 与知识库AI聊天"},
              {type:"answer",content:"我是知识库机器人，有什么想问的吗？"},
          ],
      };
  },
  methods: {
      selectOption(option) {
          this.selectedOption = option;
          // 在这里可以添加逻辑来处理选中选项后的操作
      },
      submitQuestion() {
          // 在这里可以处理用户输入的问题，比如发送到后端进行处理
          console.log('提交问题:', this.question);
          // 清空输入框
          this.question = '';
      },
      handleEnterKey(event) {
          if (event.key === 'Enter' && !event.ctrlKey && !event.shiftKey) {
              event.preventDefault(); // 阻止默认的换行行为
              this.submitQuestion(); // 调用提交问题的方法
          }
      },
      handleShiftEnterKey(event) {
          if (event.key === 'Enter' && event.shiftKey) {
              event.preventDefault(); // 阻止默认的换行行为
              this.question += '\n'; // 插入换行符
          }
      }
  }
}
</script>

<style scoped>
.gpt3 {
  display: flex;
  height: 100%;
  background-color: #f9f9f9;
}

.question {
  flex: 3;
  height: 100%;
  display: flex;
  flex-direction: column; /* 将子元素垂直排列 */
  justify-content: center; /* 在主轴上居中对齐 */
}

.selection {
  flex: 1;
  height: 100%;
}

.selection-btn {
  width: 50%;
  display: flex;
  justify-content: space-between;
  border-radius: 20px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

.selection-btn button {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s;
}

.selection-btn button:hover {
  background-color: #ccc;
}

.selection-btn button.active {
  background-color: #007bff;
  color: #fff;
}

.chat-input-wrapper {
display: flex;
align-items: center;
justify-content: center; /* 在交叉轴上居中对齐 */
border-radius: 20px; /* 圆角 */
border: 1px solid #ccc;
overflow: hidden;
width: 70%;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */

}

.chat-input {
flex: 1;
padding: 10px;
border: none;
outline: none;
background: transparent;
resize: none; /* 禁止手动拉伸 */
overflow: hidden; /* 处理多行文字显示问题 */
min-height: 20px; /* 设置最小高度 */
max-height: 100%; /* 设置最大高度 */
box-sizing: border-box; /* 保证边框和内边距不会增加高度 */
font-size: larger;
}

.submit-button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 50%; /* 圆形 */
cursor: pointer;
outline: none;
margin-left: auto; /* 将按钮放置在右侧 */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */

}

.submit-button:hover {
background-color: #0056b3;
}

</style>
